<template>
  <div>
    <!--二维码推广记录 -->
    <div class="statement-balance-change app-main-content-box">
      <app-main-title title="门店二维码推广" />
      <!-- 变动说明 -->
      <div class="app-main-tips-box top-tips">
        <div class="title">
          <i class="el-icon-warning" /> 推广说明
        </div>
        <ul>
          <li>1.通过扫不同的门店二维码会登记会员注册门店为二维码所属的门店。</li>
          <li>2.顾客直接搜索小程序注册成会员会直接登记到总部。</li>
        </ul>
      </div>
      <!--filter区域-->
      <div class="filter">
        <el-input
          v-model="filterForm[searchSelect]"
          placeholder="请输入内容"
          class="input-with-select"
          @keyup.enter.native="submitForm"
        >
          <el-select slot="prepend" v-model="searchSelect" placeholder="请选择">
            <el-option
              v-for="item in selectOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-input>
        <el-form ref="filterForm" :model="filterForm" label-width="100px" size="small">
          <!-- 筛选 -->
          <div class="app-main-filter-collapse-box filter">
            <!-- <el-collapse>
              <el-collapse-item title="按条件筛选" name="1" ref="filterCollapse">
                <el-form-item label="所属类目：" prop="businessType">
                  <el-radio-group v-model="filterForm.businessType">
                    <el-radio label="all">全部</el-radio>
                    <el-radio label="消费">总部</el-radio>
                    <el-radio label="充值">门店</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-collapse-item>
            </el-collapse>-->
          </div>

          <el-form-item class="filter-btn">
            <el-button type="primary" round @click="submitForm('filterForm')">查 询</el-button>
            <el-button round @click="resetForm('filterForm')">重 置</el-button>
            <el-button round @click="downAllShopQrCode">批量导出</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!--内容展示区域-->
      <div class="content">
        <!-- 表格内容 -->
        <div class="list-table">
          <el-table
            v-loading="tableLoading"
            :data="list"
            border
            stripe
            style="width: 100%"
            empty-text="暂无数据"
          >
            <el-table-column label="LOGO" width="70" fixed>
              <template slot-scope="scope">
                <div class="table-avatar">
                  <img v-if="scope.row.icon" :src="fileBaseUrl+scope.row.icon" alt>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="name" label="门店名称" fixed />
            <el-table-column prop="serial" label="门店编号" />
            <el-table-column prop="address" label="地址" />
            <el-table-column prop="mobilePhone" label="门店电话" />
            <el-table-column label="操作" width="100" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" @click="getShopQrCode(scope.row)">获取二维码</el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页 -->
          <pagination-direction
            v-if="paginationConfig.total!==0"
            :config="paginationConfig"
            @sizeschange="sizesChange"
            @pagechange="pageChange"
          />
        </div>
      </div>
    </div>

    <!-- 二维码弹框-->
    <dialog-down-qr-code ref="dialogDownQrCode" />
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { getShopList, getShopPromoteQrCode } from '@/api/shop'
import { downAllShopPromoteQrCode } from '@/api/download'
import { getBalanceRecordStatistic } from '@/api/statement'
import DialogDownQrCode from './components/DialogDownQrCode.vue'
export default {
  components: {
    DialogDownQrCode
  },
  data() {
    return {
      // 配置
      selectOptions: [
        {
          value: 'name',
          label: '门店名称'
        },
        {
          value: 'serial',
          label: '门店编号'
        }
      ],
      paginationConfig: {
        // 分页配置
        direction: 'center', // 分页位置
        layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
        pageSizes: [10, 20], // 分页pages
        total: 0,
        page: 1, // 页数-默认1
        pageSize: 10 // 每页条数-默认10
      },
      // 状态
      tableLoading: false, // 表格loading
      // 数据
      list: [], // 表格数据
      searchSelect: 'name', // 默认搜索的类型
      filterForm: {
        // 筛选数据
        name: '',
        serial: '',
        businessType: 'all'
      }
    }
  },
  watch: {
    searchSelect(val) {
      this.filterForm.serial = ''
      this.filterForm.name = ''
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  mounted() {
    this.initData()
    this.getActiveMaIsOnline()
  },
  methods: {
    /**
       *  获取数据
       */
    // 获取小程序是否上线
    ...mapActions(['getAuthMa']),
    getActiveMaIsOnline() {
      this.getAuthMa()
    },

    // 获取门店列表
    initData(
      page = this.paginationConfig.page,
      pageSize = this.paginationConfig.pageSize
    ) {
      this.filterForm.pageNum = page
      this.filterForm.pageSize = pageSize
      const params = Object.assign({}, this.filterForm)

      // 判断是否打开筛选
      // if (!this.$refs.filterCollapse.isActive) {
      delete params.businessType
      // }

      // 清除多余字段
      for (const key in params) {
        if (params[key] === '' || params[key] === 'all') {
          delete params[key]
        }
      }
      // 请求数据
      this.tableLoading = true
      getShopList(params)
        .then((res) => {
          this.tableLoading = false
          this.list = res.data.list
          this.paginationConfig.total = res.data.total
          this.paginationConfig.page = res.data.pageNum
        })
        .catch((err) => {
          this.tableLoading = false
        })
    },

    // 分页sizes改变
    sizesChange() {
      this.initData()
    },

    // 分页page改变
    pageChange() {
      this.initData()
    },

    /**
       *  按钮组
       */
    // 下载门店二维码
    downAllShopQrCode() {
      if (!this.$store.state.wechat.maInfo.DEFAULT.isOnline) {
        this.$alert('商户小程序未正式发布，暂时不可以获取二维码！', '提示', {
          confirmButtonText: '确定',
          center: true,
          type: 'warning',
          callback: (action) => {}
        })
      } else {
        downAllShopPromoteQrCode()
          .then((res) => {
            if (res.code === 0) {
              this.$alert('数据导出中，请稍后到数据下载中心进行下载', '提示', {
                confirmButtonText: '确定',
                center: true,
                type: 'success',
                callback: (action) => {}
              })
            }
          })
          .catch((err) => {})
      }
    },

    // 获取单个门店二维码
    getShopQrCode(row) {
      if (!this.$store.state.wechat.maInfo.DEFAULT.isOnline) {
        this.$alert('商户小程序未正式发布，暂时不可以获取二维码！', '提示', {
          confirmButtonText: '确定',
          center: true,
          type: 'warning',
          callback: (action) => {}
        })
      } else {
        this.$refs.dialogDownQrCode.open(row)
      }
    },

    // 查询
    submitForm() {
      this.initData(1)
    },

    // 重置
    resetForm(formName) {
      this.filterForm.name = ''
      this.filterForm.serial = ''
      this.$refs[formName].resetFields()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* 头部说明 */
  .top-tips {
    margin-bottom: 20px;
  }
  /* 搜索*/
  .filter {
    .el-select {
      width: 110px;
    }
    .el-input {
      width: 500px;
    }
    &-btn {
      margin-top: 10px;
    }
  }

  /* 内容 */
  .content {
    .list-table {
      .table-avatar {
        overflow: hidden;
        width: 30px;
        height: 30px;
        border: 1px solid #f7f7f7;
        border-radius: 50%;
      }
    }
  }
</style>
